<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">报表统计</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#production" data-toggle="tab">生产报表</a></li>
                        <li><a href="#inventory" data-toggle="tab">库存报表</a></li>
                        <li><a href="#quality" data-toggle="tab">质量报表</a></li>
                        <li><a href="#cost" data-toggle="tab">成本报表</a></li>
                        <li><a href="#equipment" data-toggle="tab">设备报表</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- 生产报表 -->
                        <div class="tab-pane active" id="production">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">生产计划完成情况</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="plan-completion-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">工序报工统计</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="process-work-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">生产计划列表</h3>
                                        </div>
                                        <div class="box-body">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>计划名称</th>
                                                        <th>订单编号</th>
                                                        <th>计划数量</th>
                                                        <th>完成数量</th>
                                                        <th>完成率</th>
                                                        <th>状态</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="plan-list">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 库存报表 -->
                        <div class="tab-pane" id="inventory">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">库存分布</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="inventory-distribution-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">库存预警</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="inventory-warning-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 质量报表 -->
                        <div class="tab-pane" id="quality">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">质量合格率趋势</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="quality-trend-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">工序质量分析</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="process-quality-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 成本报表 -->
                        <div class="tab-pane" id="cost">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">成本类型分布</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="cost-type-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">成本趋势</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="cost-trend-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 设备报表 -->
                        <div class="tab-pane" id="equipment">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">设备状态分布</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="equipment-status-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="box">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">设备使用率</h3>
                                        </div>
                                        <div class="box-body">
                                            <div id="equipment-usage-chart" style="height: 300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
$(function() {
    // 初始化所有图表
    initCharts();
    
    // 加载生产计划数据
    loadPlanData();
    
    // 标签页切换时重新调整图表大小
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href");
        setTimeout(function() {
            if (target === '#production') {
                planCompletionChart.resize();
                processWorkChart.resize();
            } else if (target === '#inventory') {
                inventoryDistributionChart.resize();
                inventoryWarningChart.resize();
            } else if (target === '#quality') {
                qualityTrendChart.resize();
                processQualityChart.resize();
            } else if (target === '#cost') {
                costTypeChart.resize();
                costTrendChart.resize();
            } else if (target === '#equipment') {
                equipmentStatusChart.resize();
                equipmentUsageChart.resize();
            }
        }, 100);
    });
    
    // 初始化图表
    function initCharts() {
        // 生产计划完成情况
        planCompletionChart = echarts.init(document.getElementById('plan-completion-chart'));
        planCompletionChart.setOption({
            title: { text: '计划完成率' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 75, name: '已完成' },
                    { value: 20, name: '进行中' },
                    { value: 5, name: '未开始' }
                ]
            }]
        });
        
        // 工序报工统计
        processWorkChart = echarts.init(document.getElementById('process-work-chart'));
        processWorkChart.setOption({
            title: { text: '工序报工数量' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['工序1', '工序2', '工序3', '工序4'] },
            yAxis: { type: 'value' },
            series: [{
                type: 'bar',
                data: [120, 200, 150, 80]
            }]
        });
        
        // 库存分布
        inventoryDistributionChart = echarts.init(document.getElementById('inventory-distribution-chart'));
        inventoryDistributionChart.setOption({
            title: { text: '仓库库存分布' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 40, name: '原料库' },
                    { value: 30, name: '成品库' },
                    { value: 20, name: '半成品库' },
                    { value: 10, name: '废料库' }
                ]
            }]
        });
        
        // 库存预警
        inventoryWarningChart = echarts.init(document.getElementById('inventory-warning-chart'));
        inventoryWarningChart.setOption({
            title: { text: '库存预警状态' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 80, name: '正常', itemStyle: { color: '#67C23A' } },
                    { value: 15, name: '预警', itemStyle: { color: '#E6A23C' } },
                    { value: 5, name: '缺货', itemStyle: { color: '#F56C6C' } }
                ]
            }]
        });
        
        // 质量合格率趋势
        qualityTrendChart = echarts.init(document.getElementById('quality-trend-chart'));
        qualityTrendChart.setOption({
            title: { text: '合格率趋势' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
            yAxis: { type: 'value', min: 80, max: 100 },
            series: [{
                type: 'line',
                data: [95, 92, 96, 94, 98, 97]
            }]
        });
        
        // 工序质量分析
        processQualityChart = echarts.init(document.getElementById('process-quality-chart'));
        processQualityChart.setOption({
            title: { text: '各工序合格率' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['工序1', '工序2', '工序3', '工序4'] },
            yAxis: { type: 'value', min: 80, max: 100 },
            series: [{
                type: 'bar',
                data: [95, 88, 92, 96]
            }]
        });
        
        // 成本类型分布
        costTypeChart = echarts.init(document.getElementById('cost-type-chart'));
        costTypeChart.setOption({
            title: { text: '成本类型分布' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 40, name: '材料成本' },
                    { value: 25, name: '人工成本' },
                    { value: 20, name: '设备成本' },
                    { value: 15, name: '其他成本' }
                ]
            }]
        });
        
        // 成本趋势
        costTrendChart = echarts.init(document.getElementById('cost-trend-chart'));
        costTrendChart.setOption({
            title: { text: '成本趋势' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
            yAxis: { type: 'value' },
            series: [{
                type: 'line',
                data: [12000, 15000, 13000, 18000, 16000, 14000]
            }]
        });
        
        // 设备状态分布
        equipmentStatusChart = echarts.init(document.getElementById('equipment-status-chart'));
        equipmentStatusChart.setOption({
            title: { text: '设备状态分布' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 70, name: '正常运行', itemStyle: { color: '#67C23A' } },
                    { value: 15, name: '维护中', itemStyle: { color: '#E6A23C' } },
                    { value: 10, name: '故障', itemStyle: { color: '#F56C6C' } },
                    { value: 5, name: '闲置', itemStyle: { color: '#909399' } }
                ]
            }]
        });
        
        // 设备使用率
        equipmentUsageChart = echarts.init(document.getElementById('equipment-usage-chart'));
        equipmentUsageChart.setOption({
            title: { text: '设备使用率' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['设备1', '设备2', '设备3', '设备4', '设备5'] },
            yAxis: { type: 'value', min: 0, max: 100 },
            series: [{
                type: 'bar',
                data: [85, 92, 78, 95, 88]
            }]
        });
    }
    
    // 加载生产计划数据
    function loadPlanData() {
        $.get('manufacture/report/getPlanData', function(data) {
            var html = '';
            $.each(data, function(index, plan) {
                html += '<tr>' +
                    '<td>' + plan.plan_name + '</td>' +
                    '<td>' + plan.order_no + '</td>' +
                    '<td>' + plan.planned_quantity + '</td>' +
                    '<td>' + plan.completed_quantity + '</td>' +
                    '<td>' + plan.completion_rate + '%</td>' +
                    '<td>' + plan.status_text + '</td>' +
                    '</tr>';
            });
            $('#plan-list').html(html);
        });
    }
});
</script>
